import React, {useState, useEffect, useRef, memo, useCallback} from "react";
import { IconClose, IconPlus, IconArrowLeft, IconArrowRight } from 'artemis-icon'
import './StyleGrid.less'
import { TextComponent, AreaComponent, SelectComponent, NumberComponent, TabsComponent, SwitchComponent } from './index';

const Panel = memo(function ({ children, config, data = [], title, field, onChange }) {
  const [visible, setVisible] = useState(0)
  const Text = useCallback(TextComponent as any, [] as any)
  const Number = useCallback(NumberComponent as any, [] as any)
  const Select = useCallback(SelectComponent as any, [] as any)
  const Tabs = useCallback(TabsComponent as any, [] as any)
  const Switch = useCallback(SwitchComponent as any, [] as any)
  const Area = useCallback(AreaComponent as any, [] as any)
  const [length, setLength] = useState(1)
  const [ props, setProps ] = useState([])
  const onAddClick = () => {
    setLength(length + 1)
  }

  const __onChange = (value, fieldName, index) => {
    const obj = { [ fieldName ]: value }
    const __props = props[index]
    if (__props) {
      for(const [key, value] of Object.entries(__props)) {
        obj[key] = value
      }
    }

    obj[fieldName] = value
    props[index] = obj

    onChange([...props], field)
    setProps([...props])
    console.log('renderProps: => ', [...props])
  }

  // console.log('renderProps: => ', props)
  return (
    <Tabs
      add={true}
      onAdd={onAddClick}
      className="tabs-body"
    >
      {
        (new Array(length).fill(null)).map((_, index) => {
          const __title = length > 1 ? (title + (index || '')) : title
          const values = data[index] || {};

          return (
            <div title={__title} key={index}>
              {
                config.map((item, idx) => {
                  // children.props.index_index = index;
                  switch (item.type) {
                    case 'text': {
                      return (
                        <Text
                          key={idx}
                          label={item.label}
                          field={item.field}
                          value={values[item.field]}
                          onChange={(event) => __onChange(event.target.value, item.field, index)}
                        />
                      )
                    }
                    case 'number': {
                      return (
                        <Number
                          key={idx}
                          label={item.label}
                          field={item.field}
                          value={values[item.field]}
                          onChange={(event) => __onChange(event.target.value, item.field, index)}
                        />
                      )
                    }
                    case 'select': {
                      return (
                        <Select
                          key={idx}
                          label={item.label}
                          field={item.field}
                          value={values[item.field]}
                          onChange={(event) => __onChange(event.target.value, item.field, index)}
                        >
                          {
                            item.options?.map((item, index) => (
                              <option
                                key={index}
                                value={item.value}
                              >
                                {item.label}
                              </option>
                            ))
                          }
                        </Select>
                      )
                    }
                    case 'area': {
                      return (
                        <Text
                          key={idx}
                          label={item.label}
                          field={item.field}
                          value={values[item.field]}
                          onChange={(event) => __onChange(event.target.value, item.field, index)}
                        />
                      )
                    }
                    case 'boolean': {
                      return (
                        <Switch
                          key={idx}
                          label={item.label}
                          field={item.field}
                          value={values[item.field]}
                          onChange={(event) => __onChange(event.target.checked, item.field, index)}
                        />
                      )
                    }
                  }
                  return (
                    <div
                      key={idx}
                      className={`tab-item ${index === visible ? 'tab-active' : ''}`}
                    >
                      { children }
                    </div>
                  )
                })
              }
            </div>
          )
        })
      }
    </Tabs>
  )
})

export default Panel;